<template>
  <div class="bar">
    <div class="top">
      <div class="top_left">
        <RadioGroup v-model="siteChoose" type="button" @on-change="siteClick">
          <Radio :label="item.site_id" v-for="item in siteList">{{item.name}}</Radio>
        </RadioGroup>
      </div>
    </div>
    <div class="content" :style="phoneStyle?'height: 20rem':''">
      <div id="myEchart" :style="{width: '100%', height: '100%'}"></div>
      <div class="noReason" v-if="barData.dataList.length == 0">无错误</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['barData'],
    name: "bar_hanfeng",
    data() {
      return {
        siteList: [{
          site_id: 1,
          name: '设备1'
        },{
          site_id: 2,
          name: '设备2'
        },{
          site_id: 3,
          name: '设备3'
        },{
          site_id: 4,
          name: '设备4'
        },{
          site_id: null,
          name: '全部设备'
        }],
        siteChoose: null,
        phoneStyle: false,
      }
    },
    watch: {
      barData(val){
        let self = this
        self.getPie()
      }
    },
    created() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
        self.size = 12
        self.page = 1
      } else {
        self.size = 2
        self.page = 1
        self.phoneStyle = false
      }
    },
    mounted() {
      let self = this
      self.getPie()
    },
    methods: {
      getPie() {
        let self = this
        let dataList = []
        let legend = []
        let data1 = []
        let data2 = []
        let data3 = []
        let data4 = []
        let dataResult = []
        for (let i = 0; i < self.barData.list.length; i++){
          dataList.push({
            name: self.barData.list[i].name,
            type: 'bar',
            stack: 'sum',
            barMaxWidth : 30,
            data: self.barData.list[i].item,
          })
          if (self.barData.isChiCun == undefined) {
            legend[i] = self.barData.list[i].name
          }
          if (self.barData.list[i].id == 1) {
            for (let x = 0; x < self.barData.list[i].item.length; x++) {
              data1.push(self.barData.list[i].item[x])
            }
          }
          if (self.barData.list[i].id == 2) {
            for (let x = 0; x < self.barData.list[i].item.length; x++) {
              data2.push(self.barData.list[i].item[x])
            }
          }
          if (self.barData.list[i].id == 3) {
            for (let x = 0; x < self.barData.list[i].item.length; x++) {
              data3.push(self.barData.list[i].item[x])
            }
          }
          if (self.barData.list[i].id == 4) {
            for (let x = 0; x < self.barData.list[i].item.length; x++) {
              data4.push(self.barData.list[i].item[x])
            }
          }
        }
        for (var n = 0; n < data1.length; n++) {
          dataResult.push(data1[n] + data2[n] + data3[n] + data4[n]);
        }
        dataList.push({
          name: '总计',
          type: 'bar',
          stack: 'sum',
          label: {
            normal: {
              offset:['50', '80'],
              show: true,
              position: 'insideBottom',
              formatter:'{c}',
              textStyle:{ color:'#000' }
            }
          },
          itemStyle:{
            normal:{
              color:'rgba(128, 128, 128, 0)'
            }
          },
          data: dataResult
        })
        let myEchart = self.$echarts.init(document.getElementById('myEchart'))
        myEchart.setOption({
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            show:false,
          },
          legend: {
            data: legend
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          color:['#2cc2ed', '#ffcc40','#f87b44','#5a3cf1'],
          dataZoom : [
            {
              type: 'slider',//图表下方的伸缩条
              show : true,  //是否显示
              realtime : true,  //
              start : 0,  //伸缩条开始位置（1-100），可以随时更改
              end : 80,  //伸缩条结束位置（1-100），可以随时更改
              height: 10,//组件高度
              zoomLock: true
            },
          ],
          xAxis:  {
            type: 'category',
            data: self.barData.dataList
          },
          yAxis: {
            type: 'value',
            splitLine:{show: false},//去除网格线
          },
          series: dataList
        });
      },
      siteClick(item) {
        let self = this
        self.$emit('changeSiteBar',item)
      },
    }
  }
</script>

<style lang="less" scoped>
  .bar{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    .top{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      background: #fff;
      border-bottom: 1px solid #e5e5e5;
      border-right: 1px solid #e5e5e5;
      .top_left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 16px;
        label:last-child{
          margin-left: 16px;
          border-radius: 4px;
        }
      }
      .top_right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        button{
          margin-right: 16px;
        }
      }
    }
    .content{
      width: 100%;
      height: 500px;
      background: #fff;
      position: relative;
      .noReason{
        width: 100%;
        font-size: 20px;
        color: #333;
        position: absolute;
        top: 50%;
        text-align: center;
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .bar{
      padding-bottom: 66px;
      margin-top: 52px;
      .top{
        .top_left{
          padding-left: 10px;
        }
      }
    }
  }
</style>